<template>
  <div class="view-container">
    <div class="msg-content view">
      <div v-if="total>0" class="msg-all">
        <!-- 清空按钮-->
        <div class="msg-info clearfix msg-info-wrap">
          <a @click="clearBtn" class="fr">清空所有消息</a>
        </div>

        <!-- 内容-->
        <div class="msg-list">
          <ul class="list list-system">
            <li class="msg-read" v-for="(item,index) in messageList" :key="index">
              <span class="msg-type">{{ item.messageTitle }}</span>
              <i v-if="item.readStatus=='0'" class="iconfont icon-xin"
                 style="font-size: 22px;position: absolute;top: 2px;left: -10px;color: red;"
              ></i>
              <span class="msg-title msg-info">
                <span class="title">叮！
                  【<a @click="btnClick(item)" style="margin: 0;" href="javascript:void(0)">{{ item.messageContent }}</a>】
                </span>
              </span>
              <span class="fr options-info options-f">
                <a @click="handleDelete(item)" class="btn-rush csdnc-trash">
                  <i style="font-size: 15px" class="iconfont icon-shanchu"></i>
                </a>
                <em class="data-time">{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</em>
              </span>
            </li>
          </ul>
        </div>

        <!-- 分页-->
        <div class="page-box">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getMessageInfo"
          />
        </div>

      </div>

      <div v-else class="msg-all">
        <div class="msg-message">
          <img src="../../assets/images/user/zhanwu03.jpeg">
          <p>空空如也</p></div>
      </div>
    </div>

    <el-dialog title="消息内容" append-to-body center :visible.sync="open" width="500px" @close="onClose">
      <div class="base-info-head">反馈信息
        <el-button style="float: right;height: 36px" type="text"
                   @click="jumpClick1"
                   v-if="user.deptStatus=='0'"
        >前往个人中心查看
        </el-button>
        <el-button style="float: right;height: 36px" type="text"
                   @click="jumpClick2"
                   v-if="user.deptStatus=='2'"
        >别灰心，前往社团在申请
        </el-button>
      </div>
      <div class="base-info-content-show" v-if="messageById.payload">
        <ul>
          <li>
            <div class="content-show-l">主题</div>
            <div class="content-show-r">{{ messageById.messageTitle }}</div>
          </li>
          <li>
            <div class="content-show-l">结果</div>
            <div class="content-show-r">{{ messageById.messageContent.substring(0,messageById.messageContent.length-7) }}</div>
          </li>
          <li>
            <div class="content-show-l">回复</div>
            <div class="content-show-r">{{ messageById.payload.remark }}</div>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listMessage,listMessageBD, getMessage, delMessage, delMessageReadStatus1 } from '@/api/message'
import { globalBus } from '@/utils/globalBus'

export default {
  name: 'notify',
  data() {
    return {
      messageList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        status: '0',
        toId: undefined,
        type:'1'
      },
      total: 0,
      ids: [],
      open: false,
      messageById: ''
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    this.getMessageInfo()
  },
  methods: {
    // 刷新消息未读条数
    refresh() {
      globalBus.$emit('messageTotle', 'messageTotle')
    },
    //获取消息
    getMessageInfo() {
      this.queryParams.toId = this.user.userId
      listMessageBD(this.queryParams).then(response => {
        this.messageList = response.rows
        this.total = response.total
      })
    },

    //跳转社团
    jumpClick1() {
      this.open = false
      this.$router.push('/user/profile')
      this.refresh()
      this.getMessageInfo()
    },
    jumpClick2() {
      this.open = false
      sessionStorage.removeItem('deptListName')
      sessionStorage.removeItem('deptName')
      this.$router.push('/dept/index')
      this.refresh()
      this.getMessageInfo()
    },
    //关闭
    onClose() {
      this.refresh()
      this.getMessageInfo()
    },
    //点击按钮
    async btnClick(row) {
      await delMessageReadStatus1(row.messageId);
      this.messageById = JSON.parse(JSON.stringify(row))
      this.messageById.payload = JSON.parse(this.messageById.payload)
      this.open = true
    },

    //清空所有按钮
    clearBtn() {
      this.ids = this.messageList.map(item => item.messageId)
      this.$confirm('你确定清空所有消息吗？', '消息清空', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMessage(this.ids).then(res => {
          if (res.code === 200) {
            this.getMessageInfo()
            this.refresh()
            this.msgSuccess('清空所有消息成功')
          } else {
            console.log('清空消息失败:', res.msg)
            this.msgError('清空所有消息失败')
          }
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('你确定删除本条消息吗？', '消息删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMessage(row.messageId).then(res => {
          if (res.code === 200) {
            this.getMessageInfo()
            this.refresh()
            this.msgSuccess('删除消息成功')
          } else {
            console.log('删除消息失败:', res.msg)
            this.msgError('删除消息失败')
          }
        })
      })
    }
  }
}
</script>
<style scoped>
/deep/ .el-dialog--center .el-dialog__body {
  text-align: initial;
  padding: 10px 20px 20px 20px;
}

.base-info-head {
  text-align: left;
  height: 40px;
  line-height: 35px;
  font-size: 18px;
  font-weight: 600;
  color: #2E2E2E;
  padding-left: 10px;
  border-bottom: 1px solid #F0F0F2;
}

.base-info-content-show {
  cursor: pointer;
  /*padding: 16px 112px 16px 0;*/
  padding: 10px 25px;
  position: relative;
  background: #F8F8F8;
}

.base-info-content-show ul li {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.base-info-content-show ul li .content-show-l {
  width: 30px;
  color: #555666;
  margin-right: 40px;
  font-weight: 600;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /*padding-left: 16px;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.base-info-content-show ul li .content-show-r {
  color: #222226;
  word-break: break-all;
}

/deep/ .el-pagination {
  padding: 2px 5px !important;
}

/deep/ .el-pagination__total {
  margin-right: 10px !important;
}

/deep/ .el-pagination__sizes {
  margin: 0 10px 0 0 !important;
}

/deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev, /deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px !important;
}

/deep/ .el-pager li {
  padding: 0 4px !important;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

/deep/ .el-pagination__jump {
  margin-left: 24px !important;
  font-weight: 400;
  color: #606266;
}

/deep/ .el-pagination__editor {
  padding: 0 2px !important;
  margin: 0 2px !important;
}
</style>
